<script setup lang="ts">
import type { KnowledgeType, KnowledgeList } from '@/types/consult'
import KnowledgeCard from './KnowledgeCard.vue'
import { getKnowledgePage } from '@/services/consult'
import { ref } from 'vue'
const props = defineProps<{
  type: KnowledgeType
}>()
const list = ref<KnowledgeList>([])
const finished = ref(false)
//上拉加载状态
const loading = ref(false)
//下拉刷新状态
const isLoading = ref(false)
// 下拉刷新
const onRefresh = async () => {
  list.value = []
  paramsInfo.current = 1
  // finished.value = false
  // isLoading.value = true
  await onLoad()
  isLoading.value = false
}
//查询参数
const paramsInfo = {
  type: props.type,
  current: 1,
  pageSize: 10
}
//总页数
const pageTotal = ref(0)
// 上拉加载
const onLoad = async () => {
  const res = await getKnowledgePage(paramsInfo)
  pageTotal.value = res.data.pageTotal
  list.value.push(...res.data.rows)
  paramsInfo.current++
  loading.value = false
  if (paramsInfo.current >= pageTotal.value) {
    finished.value = true
  }
}
</script>

<template>
  <div class="knowledge-list">
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <knowledge-card v-for="v in list" :key="v.id" :item="v"></knowledge-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
